<template lang="">

        <!-- <button v-bind="$attrs"> -->
            <button v-bind="rest" class="gulu-button" :class="classes" :disabled="disabled">
            <!-- 为button绑定rest得到的传入事件，两种都可以 -->
            <span v-if="loading" class="gulu-loadingIndicator"></span>
            <slot></slot>
        </button>


</template>
<script lang="ts">
import {computed} from 'vue'
export default {
  inheritAttrs: false,
  //inheritAttrs继承，默认是true，继承一切传入的事件，给template内的第一级元素
  name: "Button",
  props: {
    theme: {
      type: String,
      default: "button",
    },
    size:{
        type:String,
        default:"normal",
    },
    level:{
        type:String,
        default:"normal"
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    loading:{
        type: Boolean,
        default:false,
    }
  },
  setup(props, context) {
    //非响应式对象，等同于 $attrs
    const { ...rest } = context.attrs;
    //拿到了父传子的size参数和rest事件
    const {theme,size,level}=props;
    const classes = computed(()=>{
        return{
            [`gulu-theme-${theme}`]: theme,
            [`gulu-size-${size}`]: size,
            [`gulu-level-${level}`]:level
        }
    })
    return { rest,size, classes };
  },
};
</script>
<style lang="scss">
div{
    
    $h: 32px;
    $border-color: #d9d9d9;
    $color: #333;
    $blue: #40a9ff;
    $radius: 4px;
    $red: red;
    $orange: rgb(252, 151, 0);
    $grey: grey;
    .gulu-button {
        
        box-sizing: border-box;
        height: $h;
        padding: 0 12px;
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        background: white;
        color: $color;
        border: 1px solid $border-color;
        border-radius: $radius;
        box-shadow: 0 1px 0 fade-out(black, 0.95);
        transition: background-color 250ms;
        & + & {
            margin-left: 8px;
            border:1px solid red;
        }
        &:hover,
        &:focus {
        color: $blue;
        border-color: $blue;
        }
        &:focus {
            outline: none;
        }
        &::-moz-focus-inner {
            border: 0;
        }
         &.gulu-theme-link{
            border-color: transparent;
            box-shadow: none;
            color: $blue;
            text-decoration: underline;
        &:hover,&:focus{
            color: lighten($blue, 10%);
        }
  }
        &.gulu-theme-text{
            border-color: transparent;
            box-shadow: none;
            color: inherit;
        &:hover,&:focus{
            background: darken(white, 5%);;
            }
        }
            &.gulu-size-big{
                font-size: 24px;
                height: 48px;
                padding: 0 16px
            }
            &.gulu-size-small{
                font-size: 12px;
                height: 20px;
                padding: 0 4px;
            }

         &.gulu-theme-button {
            &.gulu-level-main {
                background: $blue;
                color: white;
                border-color: $blue;
            &:hover,
            &:focus {
                background: darken($blue, 10%);
                border-color: darken($blue, 10%);
                }
            }
            &.gulu-level-danger {
                background: $red;
                border-color: $red;
                color: white;
                &:hover,
                &:focus {
                    background: darken($red, 10%);
                    border-color: darken($red, 10%);
                }
            }
        }
        &.gulu-theme-link {
        &.gulu-level-danger {
            color: $red;
            &:hover,
                &:focus {
                    color: darken($red, 10%);
                }
            }
            &.gulu-level-warnning{
                color: $orange !important;
                &:hover,
                &:focus {
                    color: darken($orange, 10%);
                }
            }
        }
        &.gulu-theme-text {
            &.gulu-level-main {
            color: $blue;
            &:hover,
            &:focus {
                    color: darken($blue, 10%);
                }
            }
             &.gulu-level-danger {
                color: $red;
                &:hover,
                &:focus {
                    color: darken($red, 10%);
                }
            }
            &.gulu-level-warnning{
                color: $orange !important;
                &:hover,
                &:focus {
                    color: darken($orange, 10%);
                }
            }
        }
         &.gulu-theme-button {
            &[disabled] {
                cursor: not-allowed;
                color: $grey;
                &:hover {
                    border-color: $grey;
                }
            }
        }
        &.gulu-theme-link, &.gulu-theme-text {
            &[disabled] {
                cursor: not-allowed;
                color: $grey;
            }
        }
        > .gulu-loadingIndicator{
                width: 14px;
                height: 14px;
                display: inline-block;
                margin-right: 4px;
                border-radius: 8px; 
                border-color: $blue $blue $blue transparent;
                border-style: solid;
                border-width: 2px;
                animation: gulu-spin 1s infinite linear;
            }
    }
        @keyframes gulu-spin {
            0%{transform: rotate(0deg)} 
            100%{transform: rotate(360deg)} 
        }
}
</style>
